<template>
  <div class="common-select">
    <el-select v-model="commonDefautValue" placeholder="请选择" class="common-select-sel" size="mini">
      <el-option v-for="item in commonOptions" :key="item.id" :label="item.name" :value="item.name"> </el-option>
    </el-select>
    <div class="common-select-btn" @click="commonSelClick">
      <i class="el-icon-setting"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonSelectView",
  props: {
    commonValue: {
      type: String,
      default: ""
    },
    commonOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      commonDefautValue: this.commonValue
    }
  },
  methods: {
    commonSelClick() {
      console.log("1111111")
      this.$emit("editDropdownBox")
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.common-select {
  display: flex;
  .common-select-sel {
    width: 270px;
  }
  .common-select-btn {
    margin-left: 5px;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>
